<template>
  <svg class="image-rect-outline" v-if="outline" overflow="visible" :width="width" :height="height">
    <!-- rect元素是 SVG 的一个基本形状，用来创建矩形，基于一个角位置以及它的宽和高。它还可以用来创建圆角矩形。 -->
    <rect vector-effect="non-scaling-stroke" stroke-linecap="butt" stroke-miterlimit="8" fill="transparent" :rx="radius"
      :ry="radius" :width="width" :height="height" :stroke="outlineColor" :stroke-width="outlineWidth"
      :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'"></rect>
  </svg>
</template>

<script setup lang="ts">
import { defineProps, PropType, toRef } from 'vue'
import { PPTElementOutline } from '@/types/slides'
import useElementOutline from '../../hooks/useElementOutline'

const props = defineProps({
  width: {
    type: Number,
    required: true
  },
  height: {
    type: Number,
    required: true,
  },
  outline: {
    type: Object as PropType<PPTElementOutline>
  },
  radius: {
    type: String,
    default: '0',
  },
})
// toRef()：基于响应式对象上的一个属性，创建一个对应的 ref。
const { outlineWidth, outlineColor, outlineStyle } = useElementOutline(toRef(props, 'outline'))
</script>

<style lang="scss" scoped>
svg {
  overflow: visible;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}
</style>